<template>
    <div id="FaultRadar">
        <el-container>
            <el-header>
                <span class="radarHeader">安全故障</span>
            </el-header>
            <el-main>
                <el-row>
                    <!--选择框-->
                    <el-col :span="3">
                        <el-cascader-panel
                                class="myCas"
                                v-model:value="options.value"
                                :options="options"
                        >
                        </el-cascader-panel>
                    </el-col>
                    <!--雷达图-->
                    <el-col :span="4">
                        <div ref="radarPic" style="width: 260px; height: 179px;margin-top: 10px"></div>
                    </el-col>
                    <!--表格-->
                    <el-col :span="16" style="background: #13192C">
                        <el-table
                                class="myTable"
                                :data="tableData"
                                :header-cell-style=
                                        "{'text-align':'center',background:'#131E3D',borderColor:'#242F4F'}"
                                :cell-style=
                                        "{'text-align':'center',background:'#0F172D',borderColor:'#242F4F'}"

                                style="width: 100%;margin-top: 50px;background: #13192C">
                            <el-table-column
                                    prop="infoLevel"
                                    label="故障等级"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="infoType"
                                    label="故障类型"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="subSystem"
                                    label="子系统"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="infoText"
                                    label="故障内容"
                                    width="300">
                            </el-table-column>
                            <el-table-column
                                    prop="infoTime"
                                    label="故障发生时间"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="infoImpact"
                                    label="故障影响"
                                    width="276">
                            </el-table-column>
                            <el-table-column
                                    prop="infoRate"
                                    label="故障率"
                                    width="90">
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import * as echarts from 'echarts';
    import {mapState} from "vuex";

    export default {
        name: "FaultRadar",
        props: {},
        data() {
            return {
                tableData: [{
                    infoLevel: '中等',
                    infoType: '清客故障',
                    subSystem: '走形部',
                    infoText: '6车走行部3轴7位轴承严重故障',
                    infoTime: '2021-11-29 14:57',
                    infoImpact: '6车轴严重故障，需清客返回',
                    infoRate: '1%'
                }],
                radarOption : {
                    legend: {},
                    radar: {
                        name: {
                            textStyle: {
                                color: 'rgba(255,255,255,0.6)', //字体颜色
                                borderRadius: 3, //圆角
                                padding: 0, //padding
                                fontSize: 14
                            }
                        },
                        nameGap: 10,
                        center: ['50%', '50%'],
                        radius: '60%',
                        startAngle: 90,
                        splitNumber: 3,
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255,255,255,0.2)'
                            }
                        },
                        splitArea: {
                            areaStyle: {
                                color: ['rgba(255,255,255,0.4)','rgba(255,255,255,0.3)','rgba(255,255,255,0.2)',],
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(155, 155, 155, 0.4)'
                            }
                        },
                        indicator: [
                            { name: '空气质量', max: 100 },
                            { name: '客室温度', max: 100 },
                            { name: '客室噪音', max: 100 },
                            { name: '拥挤度', max: 100 },
                            { name: '舒适度', max: 100 }
                        ],
                    },
                    series: [{
                        name: '测试数据',
                        type: 'radar',
                        symbol: 'circle', // 拐点为圆形
                        symbolSize: 5,  // 拐点大小
                        itemStyle: {
                            color: '#9FFFD6' // 拐点颜色
                        },
                        lineStyle: {
                            color: 'rgba(27, 185, 52, 1)' // 连线颜色
                        },
                        areaStyle: {
                            color:'rgba(27, 185, 52, 0.6)'
                        },
                        data: [{
                            value: [60,80,55,90,70],
                        }]
                    }]
                },
                options: [{
                    value: 'firstFault',
                    label: "6车齿轮严重故障",
                },
                    {
                        value: 'secondFault',
                        label: "6车轴承严重故障",
                    },
                    {
                        value: 'thirdFault',
                        label: "7车齿轮严重故障",
                    }],
            }
        },
        methods: {
            drawRadar(radarOption) {
                let charts = echarts.init(this.$refs.radarPic);
                charts.setOption(radarOption);
            },
        },
        computed: {},
        mounted() {
            this.$nextTick(function () {
                this.drawRadar(this.radarOption);
            })
        }
    }
</script>

<style scoped>
    .el-header {
        border-bottom: #1C284B 1px solid;
        height: 40px !important;
        width: 1680px;
        padding: 10px 0 0;
    }
    .el-main {
        width: 1680px;
        background: #13192C;
        padding: 0;
    }
    .radarHeader {
        color: rgba(255,255,255,0.87);
        padding-left: 26px;
        width: 1680px;
        font-size: 16px;
    }
    .myCas {
        width: 205px;
        float: left;
        border: #242F4F 1px solid;
        overflow: hidden;
        color: rgba(255,255,255,0.87);
    }
    .myTable {
        border: #242F4F 1px solid;
    }
    .el-table::before {
        background: #242F4F;
    }
</style>
